<template>
  <div>
    <el-tag
    v-for="(item,index) in tagList"
    :key="item.label"
    :type="item.type"
    :effect="item.name == $route.name?'dark':'plain'"
    :closable='item.path!="/home"'
    style="margin-left:10px;margin-top:5px"
    size="mini"
    @click="handerClick(item)"
    @close="handlerClose(item,index)"
    >
    {{ item.label }}
  </el-tag>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name:'CommonTags',
  computed:{
    ...mapState('header',['tagList'])
  },
  methods:{
    // 点击tags跳转路由
    handerClick(item){
      this.$router.push(item.path)
    },
    // 删除tags的回调：修改header仓库中的数据
    /*
      修改数据
      跳转路由：
        1. 如果不是最后一个标签，则直接修改数据完成即可
        2. 如果是最后一个标签，则修改仓库数据之后还需要跳转路由
    */
    handlerClose(item,index){
      // 删除仓库中的tag
      this.$store.commit("header/DELETETAG",item)
      const len = this.tagList.length
      // 如果是最后一个tag
      if(this.$route.name != item.name){
        return
      }else if(len == index){
        this.$router.push(this.tagList[index-1].path)
      }else if(this.$route.path == item.path){
        this.$router.back()
      }
    }
  }
}
</script>

<style>

</style>